<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .app,.app2{
      position: relative;
      margin: 50px auto;
      width: 100px;
      height: 100px;
      transform: rotate(-45deg);
      background: pink;
      overflow: hidden;
    }
    .app img{
      width: 100px;
      height: 100px;
      transform: rotate(45deg) scale(140%);
    }
    .app2{
    }
    .app2 img{
      width: 100px;
      height: 100px;
      /*polygon的使用格式如下
        polygon(上边 右上角,右边 右下角,下边 左下角, 左边 左上角);
        注意逗号的位置


      */
      clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
      transform: rotate(45deg) scale(140%);
    }
    .app2 img:hover{
      clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    }
  </style>
</head>
<body>
<!--
  如果我们将正方形加上旋转就会很容易得到菱形
  ok,接下来我们开始

  扩展:当我们给的图片不是一个正方形时,这个方法就显得有些吃力了
  这个时候我们就可以用到一个新的属性 图片裁剪路径clip-path进行设置
  切记!!!这里我们只能是让长方形图片尽可能展示的好看一些
  并不是说解决图片的问题
  接下来我们来看看clip-path的使用细节
  clip-path是从SVG引入的;使用裁剪方式创建元素的可显示区域,
  区域部分的显示,否则隐藏
  使用属性 circle (圆圈)
  ellipse(适用于椭圆)
  polygon(多边形)
  path(路径,过去复杂不再赘述)
  这些属性的具体用法我这里不在演示了


 -->
  <div class="app">
    <img src="https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/myHead.jpg" alt="加载失败">
  </div>

  <div class="app2">
    <img src="https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/fisrtbg.jpg" alt="加载失败">
<!--    此时我们的图片就是一个长方形,这个时候我们尝试使用clip-path 对图片进行裁剪-->
  </div>


</body>
</html>
